<template>
  <div id="wallet">
    <top-bar :title="title"></top-bar>
    <div class="success-icon">
      <img src="@/assets/imgs/czcg@3x.png" alt />
      <div class="success_text">充值成功</div>
    </div>
    <ul class="success_one">
      <li>
        充值金额
        <span>{{accountMoney}}</span>
      </li>
      <li v-if="this.backMoney > 0">
        赠送余额
        <span>{{backMoney}}</span>
      </li>
      <li class="special-bottom">
        实获金额
        <span>{{actual}}</span>
      </li>
    </ul>
    <ul class="success_one">
      <li>
        充值时间
        <span>{{createDate}}</span>
      </li>
      <li>
        充值方式
        <span>{{paymentType}}</span>
      </li>
      <li class="special-bottom">
        充值号码
        <span>{{userPhone}}</span>
      </li>
    </ul>
    <div class="contain">
      <div class="btn" @click="returnWallet">返回首页</div>
      <div class="help">
        <p>
          如果对支付结果有疑问，请联系客服
          <a :href="phone">010-53916713</a>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import { Tabs, Icon, Field, InputItem, Toast, Selector, Dialog } from 'mand-mobile';
import TopBar from '@/components/TopBar';
import Loading from '@/components/loading';
import Utils from '@/common/pakjUtils';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import http from '@/common/http';
export default {
  components: {
    [Tabs.name]: Tabs,
    [Icon.name]: Icon,
    [TopBar.name]: TopBar,
    [Field.name]: Field,
    [Toast.name]: Toast,
    [InputItem.name]: InputItem,
    [Selector.name]: Selector
  },
  data() {
    return {
      title: '充值成功',
      accountMoney: '0.00',
      backMoney: '0.00',
      actual: '',
      createDate: '',
      paymentType: '',
      userPhone: '',
      os: '',
      phone: 'tel:010-53916713'
    };
  },
  mounted() {
    this.accountMoney = localStorage.getItem('accountMoney');
    this.backMoney = localStorage.getItem('backMoney');
    this.actual = Number(this.accountMoney) + Number(this.backMoney);
    this.createDate = localStorage.getItem('createDate');
    this.paymentType = localStorage.getItem('paymentType');
    this.userPhone = localStorage.getItem('userPhone');
    this.os = Utils.getOSName();
  },
  methods: {
    returnWallet() {
      /*eslint-disable */
      // 通知APP回到App首页
      if (Utils.isApp()) {
        if ((this.os === 'Linux' || this.os === 'Android') && handler) {
          handler.popRoot();
        } else if ((this.os === 'iOS' || this.os === 'MacOSX') && window.webkit) {
          window.webkit.messageHandlers.popRoot.postMessage('call-IOS');
        }
      } else {
        this.$router.push({
          name: 'MyWallet'
        });
      }
    }
  }
};
</script>
<style lang="stylus">
p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

#wallet {
  height: 100vh;
  background-color: color-primary-background;
}

i {
  font-style: normal;
}

.success-icon {
  margin-top: 20px;
  background-color: #fff;
  height: 320px;
  text-align: center;
}

.success-icon img {
  width: 80px;
  height: 80px;
  margin-top: 82px;
}

.success_text {
  font-size: 34px;
  color: #333;
  margin-top: 10px;
}

.success_one {
  margin-top: 20px;
  background-color: #fff;
  padding: 0px 30px;
}

.success_one li {
  height: 80px;
  line-height: 80px;
  font-size: 28px;
  color: #999;
}

.success_one li span {
  float: right;
  color: #333;
}

.contain {
  position: fixed;
  bottom: 20px;
  width: 100%;
}

.btn {
  height: 98px;
  line-height: 98px;
  background-color: #FF6917;
  text-align: center;
  font-size: 36px;
  color: #fff;
  margin: 0px 20px;
  border-radius: 10px;
}

.help {
  text-align: center;
  margin-top: 15px;
}

.help p {
  color: #999;
  font-size: 22px;
}

.help p a {
  color: #ff6917;
}
</style>
